<!-- 账单 -->
<template>
  <div style="padding: 15px 0px">
    <!--账单总览-->
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="flex align-centers flex-1 padding-right-15">
            <div class="flex flex-1 align-centers">
              <div class="font-size-15 font-weight-600 color-333333 margin-right-50">账单总览</div>
              <div>截止至今，账单总金额1000.00元，实付金额500.00元，欠费金额500.00，滞纳金25.00元</div>
            </div>
            <div><el-button type="primary" round size="medium">欠费</el-button></div>
          </div>
        </template>
        <div class="padding-top-bottom-10 padding-left-right-25">物业费金额200.00元，账单金额200.00元，实付金额100.00元，欠费金额100.00，滞纳金5.00元</div>
        <div class="padding-top-bottom-10 padding-left-right-25">租金金额200.00元，账单金额200.00元，实付金额100.00元，欠费金额100.00，滞纳金5.00元</div>
        <div class="padding-top-bottom-10 padding-left-right-25">管理费金额200.00元，账单金额200.00元，实付金额100.00元，欠费金额100.00，滞纳金5.00元</div>
        <div class="padding-top-bottom-10 padding-left-right-25">水费金额200.00元，账单金额200.00元，实付金额100.00元，欠费金额100.00，滞纳金5.00元</div>
        <div class="padding-top-bottom-10 padding-left-right-25">电费金额200.00元，账单金额200.00元，实付金额100.00元，欠费金额100.00，滞纳金5.00元</div>
        <div class="flex justify-end padding-left-right-25"><el-button type="primary" round size="medium" @click="dialogTableVisible = true">催费</el-button></div>
      </el-collapse-item>
    </el-collapse>

    <!--收款计划-->
    <div class="padding-bottom-20">
      <div class="font-size-16 font-weight-600 color-333333 line-height-48">收款计划</div>
      <div class="align-center justify-between padding-left-right-25 padding-top-bottom-10" v-for="(item, index) in proceedsList" :key="index">
        <div>{{ item.time }}，租金应收金额{{ item.money }}元</div>
        <div><el-button type="primary" round size="medium">出账确认</el-button></div>
      </div>
    </div>

    <!--时间查询-->
    <div class="flex padding-right-25 justify-between padding-bottom-20">
      <div>
        <el-date-picker v-model="queryTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      </div>
      <div><el-button type="primary" round size="medium">查询</el-button></div>
    </div>

    <!--日期展示-->
    <div class="font-size-16 font-weight-600 color-333333 line-height-48">2021年9月</div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="flex align-centers flex-1 padding-right-15">
            <div class="flex flex-1 align-centers">
              <div class="font-size-15 font-weight-600 color-333333 margin-right-50">账单总览</div>
              <div>截止至今，账单总金额1000.00元，实付金额500.00元，欠费金额500.00，滞纳金25.00元</div>
            </div>
            <div><el-button type="primary" round size="medium">欠费</el-button></div>
          </div>
        </template>
        <div class="padding-top-bottom-10">
          <div class="flex margin-bottom-20">
            <div class="flex" style="width:33.33%;"><div>付款所属周期</div> <div>2021/02/10 - 2022/02/09</div></div>
            <div class="flex" style="width:33.33%;"><div>付款截止日</div><div>2021/09/21</div></div>
            <div class="flex" style="width:33.33%;"><div>实际付款时间</div><div>2021/07/29</div></div>
          </div>
          <div class="flex">
            <div class="flex" style="width:33.33%;"><div>交易流水号</div><div>1010101010101</div></div>
            <div class="flex" style="width:33.33%;"><div>付款金额</div><div>500.00元</div></div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>


    <!--催费-->
    <el-dialog title="催费" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
      <el-table :data="gridData">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column property="date" label="年月" align="center"></el-table-column>
        <el-table-column property="name" label="类型" align="center"></el-table-column>
        <el-table-column property="address" label="账单金额" align="center"></el-table-column>
        <el-table-column property="address" label="实付金额" align="center"></el-table-column>
        <el-table-column property="address" label="欠费金额" align="center"></el-table-column>
        <el-table-column property="address" label="滞纳金" align="center"></el-table-column>
        <el-table-column property="address" label="操作" align="center">
          <template>
            <el-button type="text">操作</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from 'dayjs';
export default {
  components: {},
  data() {
    return {
      dialogTableVisible: false,
      gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      queryTime: '', // 查询时间
      activeNames: ['1'],
      // 收款计划
      proceedsList: [
        {
          money: '100.00',
          time: '2020年9月',
        },
        {
          money: '100.00',
          time: '2020年9月',
        },
        {
          money: '100.00',
          time: '2020年9月',
        },
        {
          money: '100.00',
          time: '2020年9月',
        },
        {
          money: '100.00',
          time: '2020年9月',
        },
      ],
      list:[

      ]
    };
  },

  methods: {
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>